import { Directive, HostListener, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appAppdir]'
})
export class AppdirDirective {
  num = 0;

  constructor(private el: ElementRef) {
    this.el = el;
  }

  @Input('appAppdir') bgColor: string;
  // 给使用指令的控件添加 mouseenter的事件
  @HostListener('mouseenter') onMouseEnter() {
    this.num++;
    console.log(this.bgColor || 'red', this.num);
    this.el.nativeElement.style.backgroundColor = this.bgColor;
  }
  // 指令离开事件
  @HostListener('mouseleave') onMouseLeave() {
    console.log('directive leave');
  }
}
